<template>
	<view class="body">
		<view class="box">
			<view class="card">
				<view class="top">订单编号{{list.orderSn}}</view>
				<view class="main">
					<image class="img" :src="list.productPic"></image>
					<view class="info">
						<view class="p1">
							<view class="name">{{list.productName}}</view>
							<view class="price">￥{{list.productPrice}}</view>
						</view>
						<view class="p2">
							<view class="code">编号：{{list.productId}}</view>
							<view class="number">x{{list.productQuantity}}</view>
						</view>
						<view class="p3" v-for="item in list.productAttr">
							<view>{{item.key}} : {{item.value}}</view>
						</view>
					</view>
				</view>
				<view class="totalprice">
					合计：￥{{list.totalPrice}}
				</view>
			</view>

			<view class="content">
				<view class="items">
					<view class="title">退单数量：</view>
					<input class="ipt" type="text" v-model="count" />
				</view>
				<view class="items">
					<view class="title">请输入退货原因：</view>
					<input class="ipt" type="text" v-model="reason" placeholder="请填写退货原因" />
				</view>
				<view class="items">
					<view class="title">请选择退货公司：</view>
					<picker mode="selector" :value="index" range-key="addressName" :range="companyList" @change="bindPickerChange">
						<view class="ipt">{{index == "" ? "请选择地区" : companyList[index].addressName}}</view>
					</picker>
				</view>
				<view class="items">
					<view class="title">请填写问题描述：</view>
					<input class="ipt" type="text" v-model="desc" placeholder="请输入问题描述" />
				</view>
			</view>
			
			<view class="uploadImg">
				<view class="title">
					<view class="title-a">温馨提示：</view>
					<view class="title-b">上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张</view>
				</view>
				<view class="upload">
					<view class="uploadBtn" @tap="selectImg">
						<image class="img" src="../../../../static/icons/上传.png"></image>
						<view>上传图片</view>
					</view>
					<view class="imgList">
						<view class="box" v-for="item in imgList">
							<image class="upimg" :src="item"></image>
							<image class="delet" @tap="delet(item)" src="../../../../static/icons/fail.png"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="submit" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		orderReturn,getPreOrderById,addOrderReturnApply,getCompanyAddrss
	} from "../../../../api/my/index.js";
	import baseUrl from "../../../../api/baseUrl.js"
	export default {
		data() {
			return {
				list: [],
				skuid:'',
				count:'',
				reason: '',
				desc:'',
				imgList:[],
				companyList:[],
				index:0,
				imgFileurl:''
			};
		},
		onLoad(options) {
			this.skuid = options.skuid;
			getPreOrderById(options.id).then(res => {
				console.log(res)
				res.data.orderItems.forEach(ele =>{
					ele.productAttr = JSON.parse(ele.productAttr)
				});
				var result = res.data.orderItems.find(ele =>ele.id == this.skuid);
				res.data.orderItems = [result];
				this.list = res.data.orderItems[0];
				this.count =  res.data.orderItems[0].productQuantity
				
			});
			getCompanyAddrss().then(res=>{
				console.log(res)
				this.companyList = res.data.items
			})

		},
		methods: {
			selectImg(){
				var _this = this;
				uni.chooseImage({
					success(res){
						console.log(res)
						var allTempFile = res.tempFiles;
						var key = allTempFile.find(ele=>ele.size > 1024*1024);
						if(allTempFile.length > 3){
							uni.showToast({
								title:"一次上传图片不能超过3张",
								icon:"none"
							})
							return
						}
						if(key){
							uni.showToast({
								title:"单张图片大小不能超过1M",
								icon:"none"
							})
						}
						if(allTempFile.length + _this.imgList.length > 3){
							uni.showToast({
								title:"图片总数不能超过3张",
								icon:"none"
							})
							return
						}
						_this.imgList.push(...res.tempFilePaths)
					}
				})
			},
			delet(val){
				var key = this.imgList.findIndex(ele=>ele == val);
				this.imgList.splice(key,1)
			},
			bindPickerChange(e){
				this.index = e.target.value
			},
			//上传图片
			upload(){
				var imgList = [];
				this.imgList.forEach(ele=>{
					// Promise  一个容器  用于存储异步操作的结果
					var pro = new Promise(function(resolve,rejected){
						uni.uploadFile({
							url:baseUrl+"/lejuClient/orderReturn/uploadImg",
							filePath:ele.path,
							name:'file',
							success(res){
								resolve(res)
							},
							fail(res){
								rejected(res)
							}
						})
					})
					imgList.push(pro)
				});
				Promise.all(imgList).then(res=>{
					res.forEach(ele=>{
						ele.data = JSON.parse(ele.data)
					})
					console.log(res)
					this.imgFileurl = res[0].data.data.fileUrl;
					// console.log(this.imgFileurl)
				})
			},
			submit(){
				this.upload();
				var obj={
					  "companyAddressId": this.companyList[this.index].id,
					  "count": this.list.productQuantity,
					  "description": this.desc,
					  "orderId": this.list.orderId,
					  "orderItemId": this.list.id,
					  "proofPics": this.imgFileurl,
					  "reason": this.reason
				}
				addOrderReturnApply(obj).then(res=>{
					// console.log(res)
					if(res.success == true){
						uni.showToast({
							title:"申请退货成功！"
						})
						uni.navigateTo({
							url:"/pages/my/order/order?type=4"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F1ECE7;
	}

	.box {
		padding: 15px 15px;
		box-sizing: border-box;
		background-color: #F1ECE7;

		.card {
			padding: 18px;
			margin: 15px auto;
			border-radius: 12px;
			font-size: 12px;
			color: #3e3e3e;
			background-color: #fff;

			.top {
				line-height: 16px;
				padding-bottom: 15px;
				border-bottom: 1px solid #f1ece7;
			}

			.main {
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #f1ece7;

				.img {
					width: 81px;
					height: 81px;
				}

				.info {
					width: 235px;
					margin-left: 14px;

					.p1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 13px;
						line-height: 37px;

					}

					.p2 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
					}

					.p3 {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
					}
				}
			}

			.totalprice {
				display: flex;
				justify-content: flex-end;
			}
		}

		.content {
			margin-top: 20px;

			.items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				padding: 15px;
				background-color: #fff;
				border-bottom: 1Px solid #f1ece7;

				.ipt {
					text-align: right;
				}
			}
		}
		.uploadImg{
			height: 138px;
			background-color: #fff;
			padding: 15px;
			.title{
				font-size: 12px;
				.title-a{
					font-weight: 700;
				}
			}
			.upload{
				display: flex;
				align-items: center;
				.uploadBtn{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					width: 60px;
					height: 60px;
					font-size: 10px;
					color: #666;
					.img{
						width: 29px;
						height: 29px;
					}
				}
				.imgList{
					display: flex;
					align-items: center;
					.box{
						width: 60px;
						height: 60px;
						border-radius: 4px;
						background-color: rgba(0,0,0,.1);
						margin-left: 10px;
						position: relative;
						.upimg{
							width: 100%;
							height: 100%;
						}
						.delet{
							position: absolute;
							top: -5px;
							right: -5px;
							width: 17px;
							height: 17px;
						}
					}
				}
			}
		}
		.submit{
			width: 268px;
			height: 47px;
			line-height: 47px;
			text-align: center;
			border-radius: 14px;
			font-size: 15px;
			margin: 60px auto;
			color: #fff;
			background-color: #354e44;
		}
	}
</style>
